<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流布局</title>
    <link rel="stylesheet" href="./waterfall.css">
</head>

<body>
    <div id="ui-waterfall-container">
        <div class="ui-waterfall-item">
            <div class="ui-waterfall-img-box">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="ui-waterfall-item">
            <div class="ui-waterfall-img-box">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="ui-waterfall-item">
            <div class="ui-waterfall-img-box">
                <img src="./images/3.jpeg" alt="">
            </div>
        </div>
        <div class="ui-waterfall-item">
            <div class="ui-waterfall-img-box">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="ui-waterfall-item">
            <div class="ui-waterfall-img-box">
                <img src="./images/5.jpg" alt="">
            </div>
        </div>
        <div class="ui-waterfall-item">
            <div class="ui-waterfall-img-box">
                <img src="./images/6.jpg" alt="">
            </div>
        </div>
        <div class="ui-waterfall-item">
            <div class="ui-waterfall-img-box">
                <img src="./images/7.jpg" alt="">
            </div>
        </div>
    </div>
</body>
<script>
    window.onload = function () {
        class Waterfall {
            constructor(parent, box) {
                if (!parent || !box) {
                    throw Error('请初始化！')
                }
                this.parent = document.getElementById(parent);
                this.box = this.parent.getElementsByClassName(box)
                this.boxWidth = this.box[0].offsetWidth;
            }
            // 计算可以放几列
            getCols() {
                let windowWidth = document.body.offsetWidth || document.documentElement.clientWidth;
                return parseInt(windowWidth / this.boxWidth)
            }
            // 让整体盒子居中
            setCenter() {
                let cols = waterfall.getCols();
                let allWidth = cols * this.boxWidth;
                this.parent.style.width = allWidth + 'px';
            }
            setCore() {
                let heightArray = [];
                for (let i = 0; i < this.box.length; i++) {
                    if (i < this.getCols()) {
                        heightArray.push(this.box[i].offsetHeight);
                    }
                    else {
                        let result = this.computedArrayMin(heightArray);
                        //   console.log(result)
                        this.box[i].style.position = 'absolute';
                        this.box[i].style.top = result.value + 'px';
                        this.box[i].style.left = this.box[result.index].offsetLeft + 'px';
                        //   this.box[i].style.left = this.boxWidth*result.index + 'px';
                        heightArray[result.index] += this.box[i].offsetHeight;
                    }
                }
                let result = this.computedArrayMin(heightArray);

            }
            computedArrayMin(array) {
                let temp = {
                    value: array[0],
                    index: 0
                };
                console.log(array)
                for (let i = 0; i < array.length; i++) {
                    if (temp.value > array[i]) {
                        temp.value = array[i];
                        temp.index = i
                    }
                }
                return temp;
            }
            render() {
                this.setCenter();
                this.setCore();
            }
        }
        let waterfall = new Waterfall('ui-waterfall-container', 'ui-waterfall-item');
        waterfall.render()
    }

</script>

</html>